情境

決定畫面的平衡有許多要考慮的因素，除了過長的內容會造成畫面破版之外，反過來，如果過短的內容是不是也會造成視覺上的不協調呢？

你能看見多遠的未來呢？

看看下面這個例子：

今天假設我們有一個全站共用的 Button，以上圖為例，這個 Button 元件被應用在 Cancel 以及 Subscribe 這兩個按鈕。

但是因為這兩個字夠長，所以並不會覺得哪裡怪怪的。但是如果我改成這樣呢？

內容比較短的這個 OK 按鈕 看起來就會有點奇怪。

換個例子，我們卡片上有個「巨峰葡萄」的標籤：

如果今天變成這樣呢？

因為過短的長度，讓這個標籤放在這個位置顯得怪怪的。

像我們這種常見的藥丸型標籤也是：

如果內容變得更短，看起來也是很突兀：

在很多情況下，添加或刪除一個單詞會改變設計的外觀，除了使用者自行輸入的內容會可能造成這樣的狀況之外，不同語言的翻譯也會影響內容的長度。另外，假設內容是電腦自己產生的，例如自動產生標籤等等，或是去爬蟲來的資料，其內容都很有可能跟原本的預期有差異。

過短的內容除了可能會影響美觀之外，甚至某些情況下會影響使用者的操作，例如可點擊的區域變小，讓使用者點不到。或是按鈕太小，讓使用者容易忽略他，或不覺得他是按鈕。

設置最小的寬度

最簡單直覺得方式，就是我們需要設置最短寬度：

.tag {
  min-width: 80px;
}

設置內距讓最小寬度變大

有時候即使我們設置了最小寬度，還是會有些奇怪的地方：

例如這兩個標籤即使不會看起來太短，但是內容跟邊界的距離太近了，如果我們設置一些內距，也能夠讓過短的內容看起來長一些：

.tag {
  min-width: 36px;
  padding: 0px 8px;
}

直接限制內容的長度

若內容是由使用者來輸入的，或許我們可以在他新增一個標籤的時候禁止他輸入「一個字」的標籤。

小結

過短的內容其實也是我們容易忽略的小細節，今天我們討論幾個案例：

• 按鈕文字過短造成按鈕看起來很小
• 卡片上的標籤內容過短造成看起來不和諧
• 標籤長度過短，造成標籤的形狀不像標籤

我們也提供幾個可以嘗試修正的方向：

• 設置最小的寬度
• 設置內距讓最小寬度變大
• 直接限制內容的長度

即使解決的方法可能很簡單到令人不屑一顧，但最重要的事是，我們必須要意識到可能會有這樣的問題，我們才能夠提前避免這樣的問題。